<template>
    <div class="search">
        <div class="top">
            <span><router-link to="/home/recommand"><</router-link></span>
            <input type="text" placeholder="搜索你想要的壁纸" @keyup.enter="performSearch">
        </div>
        <div class="bizi">
                <div class="first">
                    <h2>最近搜索</h2>
                    <span>明星头像</span>
                </div>
                <div class="second">
                    <h2>热门标签</h2>
                    <span>美女</span>
                    <span>黑神话</span>
                    <span>中秋</span>
                    <span>动态壁纸</span>
                    <span>iPhone16壁纸</span>
                    <span>头像</span>
                    <span>蜡笔小新</span>
                    <span>风景</span>
                </div>
                <div class="third">
                    <h2>发现精彩</h2>
                    <ul>
                        <li>
                            <img src="./pages/img/q1.png" alt="">
                            <h3>画呀AI</h3>
                            <p>免费!效果超赞的AI图片生成器!</p>
                        </li>
                        <li>
                            <img src="./pages/img/q2.webp" alt="">
                            <h3>个性情侣欧美头像大全</h3>
                            <p>头像DIY|抖音头像|情侣头像|欧美</p>
                        </li>
                        <li>
                            <img src="./pages/img/q3.webp" alt="">
                            <h3>积分兑红包</h3>
                            <p>移动积分兑换现金红包，秒到账!</p>
                        </li>
                    </ul>
                </div>
        </div>
        <div class="pic" v-if="searchResults.length > 0">
            <img v-for="image in searchResults" :src="image.url" alt="Image">
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../common/less/varible.less';

// scoped 作用域
.search {
    font-family: @fontfamily;
    overflow: hidden;

    // background-color:  rgba(248, 219, 222,.4);
    .top {
        height: 50px;
        width: 85%;
        margin: 10px;

        span {
            font-size: 28px;
        }

        input {
            height: 50px;
            width: 260px;
            padding: 20px;
            margin-left: 10px;
            box-sizing: border-box;
            border: 2px solid white;
            background-color: transparent;
        }
    }

    .pic {
        width: 100%;
        margin: 0 auto;

        img {
            width: 80%;
            margin: 0 auto;
        }
    }
}
.bizi {
    width: 100%;
    height: 580px;
    overflow: hidden;
    margin-left: 10px;

    h2 {
        color: #787878;
        margin-bottom: 10px;
    }

    div {
        margin-top: 20px;
    }

    span {
        padding: 5px;
        background-color: #ffffff;
        color: #787878;
        margin: 6px;
        line-height: 40px;
        font-size: 22px;
    }
    ul{
        li{
            display: block;
            margin-top: 10px;
            position: relative;
            height: 80px;
            img{
                width: 20%;
            }
            h3{
                position: absolute;
                top: 10%;
                left: 22%;
                font-size: 24px;
            }
            p{
                position: absolute;
                top: 60%;
                left: 22%;
                color: #787878;
                font-size: 20px;
            }
        }
    }
}
</style>
<script>
import RecommandView from '@/views/pages/RecommandView.vue';
import searchImages from '../common/jiekou/jiekou';
export default {
    data() {
        return {
            searchQuery: '',
            searchResults: [],
        };
    },
    methods: {
        performSearch() {
            searchImages(this.searchQuery).then(results => {
                this.searchResults = results;
            });
            const biziElement = document.querySelector('.bizi');
            if (biziElement) {
                biziElement.style.display = 'none';
            }
        },
    },
};
</script>